<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="assets/css/custom1.css" />
	
	<script type="text/javascript" src="assets/js/jquery-1.4.2.js"></script>
	
	<style type="text/css">
		.texto {
			font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
			font-size:12px;
		}
		
		a:link {text-decoration: none; color: blue}		
		a:visited {text-decoration: none; color: blue}
		a:active {text-decoration: none; color: blue}
		a:hover {text-decoration: underline; color: blue;}
		#frmRatings div{
			float: left;
	    	text-align: center;
		}
	</style>
	<!-- Portlets setup -->
	<script type="text/javascript">
		$(function() {
			$(".column").sortable({
				connectWith: '.column'
			});
	
			$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
				.find(".portlet-header")
					.addClass("ui-widget-header ui-corner-all")
					.prepend('<span class="ui-icon ui-icon-minusthick"></span>')
					.end()
				.find(".portlet-content");
	
			$(".portlet-header .ui-icon").click(function() {
				$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
				$(this).parents(".portlet:first").find(".portlet-content").toggle();
			});
	
			$(".column").disableSelection();
	
		});
	</script>
	<script type="text/javascript">

		//al hacer enter en la caja de texto de los tags se envia la info
		$(document).ready(function(){

	        $("#tags-file").keydown(function(event){
	                if(event.keyCode==13) {
	                        event.preventDefault();
	                        $("#btntags-file").click();
	                }
	        });
        
		});	

		function moreTags() {
			var tagsFile = $("#tags-file").val();

			if( tagsFile  != "") {				
				getPage("tagservlet.do", "#tag_cloud", "persist-tag-file=yes&cloud_type=TAG_FILE&filename=${fileRepo.fileName}&fileindex=${fileindex}&moretags="+tagsFile);
				$("#tags-file").val("");				
			}else {
				alert("Ingresa los tags");
			}			
		}	
	</script>
</head>

<body style="background-color: #DDEEF6;">

<div class="texto" id="result-content" 
	style="display: table; height:280px;">	
	
	<div id="media-content"
			style="display: table-cell; 
					vertical-align: top;float:left;">		
		<c:choose>
			<c:when test="${fileRepo.fileExtension == 'flv'}">
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/flv-icon-256x256.png" title="Media FLV">
				</div>	

			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'mp3'}">
			
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/MP3-icon-256x256.png" title="Media Mp3">
				</div>	
				
			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'doc' || fileRepo.fileExtension == 'docx'}">				
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/Word-icon-256x256.png" title="Documento de Word">
				</div>				
			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'xls'}">				
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/Excel-icon-256x256.png" title="Documento de Excel">
				</div>				
			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'ppt' || fileRepo.fileExtension == 'pptx'}">				
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/PowerPoint-icon-256x256.png" title="Documento de PowerPoint">
				</div>
			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'txt'}">				
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/Text-icon-256x256.png" title="Documento de texto">
				</div>
			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'html'}">
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/HTML-icon-256x256.png" title="Documento HTML">
				</div>
			</c:when>
			
			<c:when test="${fileRepo.fileExtension == 'pdf'}">
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/PDF-icon-256x256.png" title="Documento PDF">
				</div>
			</c:when>
			
			<c:otherwise>
				<div id='mediaspace' style="width: 631px; height: 150px; text-align: center;">
					<img src="assets/icons/Preview-icon-256x256.png" title="Documento PDF">
				</div>
			</c:otherwise>
		</c:choose> 
		
				
		<!-- titulo -->
		<div class="texto" style="font-size:18px; font-weight:bold;text-align: center;">${fileRepo.fileName}</div>
	
		
	</div>
	
	<div id="description-content" style="float:left;width:631px;margin-top:30px;margin-left:25px;">	
		
		<div  style="width:300px;float: left;">
		
			<div >	
				<div style="background-color: #0099CC;font-size:16px; font-weight:bold;color:#FFFFFF;">&nbsp;&nbsp;Propiedades del archivo</div>
				<div class="portlet-content">
					
					
					<b>Nombre:</b> ${fileRepo.fileName}
					<br/>
					<b>Tama&ntilde;o:</b> ${fileRepo.fileLength} KB
					<br/>
					
					
				</div>				
			</div>




			
			
									
		</div>
		
			<!-- seccion del rating -->
		<div id="rating" style="float:left;margin-left: 30px;">
		
			<div style="background-color: #0099CC;font-size:16px; font-weight:bold;color:#FFFFFF;"">
				&nbsp;&nbsp;Vota por este archivo!
			</div>
			<div id="msgErrorR" style="display:none;color:#ED0000;">&nbsp;Debe seleccionar un numero de voto</div>
			<form id="frmRatings" action="rating.do" method="post">
				<div style="display:inline;float:left;">
					<div><input type="radio" id="voto1" name="rate" value="1" class="validate[required]"   /><br/>1</div>
					<div><input type="radio" id="voto2" name="rate" value="2" class="validate[required]"   /><br/>2</div>
					<div><input type="radio" id="voto3" name="rate" value="3" class="validate[required]"   /><br/>3</div>
					<div><input type="radio" id="voto4" name="rate" value="4" class="validate[required]"   /><br/>4</div>
					<div><input type="radio" id="voto5" name="rate" value="5" class="validate[required]"   /><br/>5</div>
					<div><input type="radio" id="voto6" name="rate" value="6" class="validate[required]"   /><br/>6</div>
					<div><input type="radio" id="voto7" name="rate" value="7" class="validate[required]"   /><br/>7</div>
					<div><input type="radio" id="voto8" name="rate" value="8" class="validate[required]"   /><br/>8</div>
					<div><input type="radio" id="voto9" name="rate" value="9" class="validate[required]"   /><br/>9</div>
					<div><input type="radio" id="voto10" name="rate" value="10" class="validate[required]"   /><br/>10</div>
				</div>
				<input id="ratinVota" type="button" value="Vota!" onclick="fnSendVote(this);"
				
				<c:if test="${isRating == '1'}">
					disabled="disabled" 
				</c:if>	
				/>
				
				<input id="fileindex" name="fileindex" type="hidden" value="${fileindex}" />
			</form>
		</div>
	</div>
	
</div>
			<div >	
				
				<div style="margin:auto;">
					<script type="text/javascript">
						
						fnSendRecomendaciones();
					</script>
					<div id="detailsRecomendation"></div>
				</div>				
			</div>
   <script> 
$(function() { 
    //var url_send = $("#register_form").attr('action');
    //alert("before"+url_send);
	/*$('#frmRatings').validationEngine();*/
	
}); 
</script>
</body>
</html>
